<template>
	<view>
		<!-- 刷新页面后的顶部提示框 -->
		<view class="tips" :class="{ 'tips-ani': tipShow }">努力刷新ing</view>
		
		<!-- 轮播图 -->
		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500" >
			<swiper-item v-for="(item,index) in swiperList" :key="index" @click="gotoActivityDetail(item._id)">
				<image :src="item.imgPath[0]" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 横条：展示积分数、待打卡活动、在借书籍 -->
		<view class="u24">
			<view class="_div" @click="gotoUrl('../profile/balanceChangeLog')">
				<image class="img" src="../../static/icon/index/u25.png"></image>
				<view class="value">
					<text class="t1 t11">{{userInfo.balance}}</text>
					<text class="t2">我的积分</text>
				</view>
				
			</view>
			<view class="_div" @click="gotoUrl('../activities/uploadPic')">
				<image class="img" src="../../static/icon/index/u30.png"></image>
				<view class="value">
					<text class="t1 t12">{{picActNum}}</text>
					<text class="t2">待打卡活动</text>
				</view>
			</view>
			<view class="_div" @click="gotoUrl('../profile/booksOrders')">
				<image class="img" src="../../static/icon/index/u35.png"></image>
				<view class="value">
					<text class="t1 t13">{{bookNotReturn}}</text>
					<text class="t2">在借书籍</text>
				</view>
			</view>
		</view>
		
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==formData.TabCurIndex?'text-orange cur':''" v-for="(item,index) in TabCur" :key="index" @tap="tabSelect" :data-id="index">
					{{item.title}}
				</view>
			</view>
		</scroll-view>
		<uni-clientdb ref="udb" v-slot:default="{data, loading, error, options}" :options="formData" :collection="collection"
		 :field="field" @load="load" orderby="_id desc" :where="nwhere">
			<!-- 基于 uni-list 的页面布局 -->
			<uni-list>
				<!-- to属性：将新闻ID和标题传给详情页 -->
				<!-- TODO：需增加日期格式化的示例 -->
				<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
				<uni-list-item direction="row" v-for="item in data" :key="item.id" :to="'/pages/news/newsDetail?id='+item._id+'&title='+item.title">
					<!-- 通过header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
					<template v-slot:header>
						<view class="uni-thumb">
							<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
							<image :src="item.imgPath[0]" mode="aspectFill"></image>
						</view>
					</template>
					<template v-slot:body>
						<view class="flex flex-direction justify-between" >
							<view style="font-size: 30rpx;">{{item.title}}</view>
							<uni-dateformat class="text-grey text-xs self-end" :date="item.createDate" format="yyyy/MM/dd"/>
						</view>
						
					</template>
				</uni-list-item>
			</uni-list>
			<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
			<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
		</uni-clientdb>
	</view>
</template>

<script>
	const db = uniCloud.database();
	const app = getApp();
	import shareMsg from '@/common/shareMessage.js';
	
	export default {
		data() {
			
			return {
				title: 'Hello',
				swiperList: [],
				// swiper 滑动块式样
				dotStyle: true,
				
				// 数据表名
				collection: 'wxNews',
				// 查询字段，多个字段用 , 分割
				field: '_id,title,imgPath,url,createDate',
				formData: {
					status: 'loading', // 加载状态
					TabCurIndex: 0
				},
				tipShow: false ,// 是否显示顶部提示框
				cuIconList: [{
					icon: 'iconfont iconicon-test-copy',
					color: 'red',
					name: '纪念品',
					url: '/pages/giftsList/giftsList'
				}, {
					icon: 'iconfont iconhuodong1',
					color: 'orange',
					name: '活动',
					url: '/pages/activities/activities'
				}, {
					icon: 'iconfont icontushu-copy',
					color: 'yellow',
					name: '图书馆',
					url: '/pages/library/list/list'
				}],
				gridCol: 3,
				hasLogin: false,
				TabCur: [
					{index: 0,
					title: "全部",
					tag: ""},
					{index: 1,
					title: "党建资讯",
					tag: "tag =='党建资讯'"},
					{index: 2,
					title: "政策周推",
					tag: "tag =='政策周推'"},
					{index: 3,
					title: "月刊",
					tag: "tag =='实验室月刊'"},
					{index: 4,
					title: "其他",
					tag: "tag =='其他'"}
				],
				nwhere: "",
				userInfo: {
					balance: 0
				},
				picActNum: 0,
				bookNotReturn:0
			}
		},
		onLoad() {
			db.collection('activities').where({
				showOnIndex: true,
				onShow: true
			}).get().then( res => {
				this.swiperList = res.result.data
			})
			app.checkToken().then((res)=>{
				this.getUserInfo()
				if (!app.globalData.hasLogin) {
					uni.showModal({
						title: "请先登陆",
						success: (res) => {
							if (res.confirm) {
								uni.switchTab({
									url:"/pages/profile/profile"
								})
							}
						}
					})
				}
			})
			
		},
		onShow() {
			db.collection('picActivities').where('onShow==true&&endtime>$env.now-86400000').count().then(res => {
				// console.log(res)	
				this.picActNum = res.result.total
			})
			this.getUserInfo()
		},
		onShareAppMessage() {
			var path = getCurrentPages()[0].route
			console.log(path)
			return shareMsg.shareMsg({
				title: "AIIT百宝箱",
				path: path,
				imageUrl: '/static/img/shareImg.png'
			})
		},
		methods: {
			
			/**
			 * 下拉刷新回调函数
			 */
			onPullDownRefresh() {
				this.tipShow = true
				this.formData.status = 'more'
				this.$refs.udb.loadData({
					clear: true
				}, () => {
					this.tipShow = false
					uni.stopPullDownRefresh()
				})
			},
			/**
			 * 上拉加载回调函数
			 */
			onReachBottom() {
				this.$refs.udb.loadMore()
			},
			load(data, ended) {
				if (ended) {
					this.formData.status = 'noMore'
				}
			},
			
			// 从首页轮播图进入活动详情页面
			gotoActivityDetail: function(id) {
				uni.navigateTo({
					url: '/pages/activities/detail?id=' + id
				})
			},
			
			goToDetail: function(e) {
				uni.navigateTo({
					url: "../news/newsDetail"
				})
			},
			
			gotoUrl: function(url) {
				uni.navigateTo({
					url: url,
					fail: (res) => {
						if (res.errMsg == "navigateTo:fail can not navigateTo a tabbar page") {
							uni.switchTab({
								url:url
							})
						}
					}
				})
			},
			
			getUserInfo: function() {
				var that = this
				that.hasLogin = app.globalData.hasLogin;
				that.userInfo = app.globalData.userInfo;
				// 正在举行的打卡活动数量
				db.collection('library-orders').where({
					uid: that.userInfo._id, 
					returned: false
				}).count().then(res => {
					that.bookNotReturn = res.result.total
				})
			},
			
			tabSelect(e) {
				this.formData.TabCurIndex = e.currentTarget.dataset.id;
				this.nwhere = this.TabCur[this.formData.TabCurIndex].tag
				// this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			}
			
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';
	@import '@/common/iconfont.css';
	
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}
	
	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}
	
	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}
	
	.content {
		width: 100%;
		display: flex;
	}
	
	.list-picture {
		width: 100%;
		height: 145px;
	}
	
	.thumb-image {
		width: 100%;
		height: 100%;
	}
	
	.ellipsis {
		display: flex;
		overflow: hidden;
	}
	
	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.u24 {
	    border-width: 0px;
	    position: relative;
	    // left: 13px;
	    // top: 301px;
	    width: 100%;
	    height: 135rpx;
	    display: flex;
		flex-direction: row;
	}
	
	.u24 ._div {
	    border-width: 0px;
	    width: 33.3%;
	    height: 135rpx;
	    background: inherit;
	    background-color: rgba(255, 255, 255, 1);
	    box-sizing: border-box;
	    border-width: 1px;
	    border-style: solid;
	    border-color: rgba(202, 202, 202, 1);
	    border-left: 0px;
	    border-top: 0px;
	    border-bottom: 0px;
	    border-radius: 0px;
	    border-top-right-radius: 0px;
	    border-bottom-right-radius: 0px;
	    -moz-box-shadow: none;
	    -webkit-box-shadow: none;
	    box-shadow: none;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	
	.u24 ._div .img {
		left: 10rpx;
		top: 15rpx;
	    width: 100rpx;
	    height: 100rpx;
	}
	
	.u24 ._div .value {
		position: relative;
		left: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 130rpx;
		height: 130rpx;
	}
	.u24 ._div .value .t1 {
		position: absolute;
		top: 25rpx;
		font-size: 50rpx;
		font-weight: 700;
		font-style:italic;
	}
	.u24 ._div .value .t1.t11 {
		color: #F2A31B;
	}
	.u24 ._div .value .t1.t12 {
		color: #A9D057;
	}
	.u24 ._div .value .t1.t13 {
		color: #EE9BA0;
	}
	.u24 ._div .value .t2 {
		position: absolute;
		// align-items: center;
		// left: 0rpx;
		bottom: 10rpx;
		// width: 150rpx;
		font-size: 20rpx;
		color: gray;
	}
</style>
